<template>
	<!-- type_state：0（秒杀商品），1（普通商品），2（积分商品），3（拼团商品） -->
	<view class="">
		<!-- 订单状态 -->
		<view class="state">
			<!-- 积分商品 -->
			<view v-if="type_state == 2">
				<text v-if="content.state == 1">待付款</text>
				<text v-else-if="content.state == 2">待发货</text>
				<text v-else-if="content.state == 3">待收货</text>
				<text v-else-if="content.state == 4">已完成</text>
			</view>
			<!-- 拼团商品 -->
			<view v-if="type_state == 3">
				<text v-if="content.state == 0">已退款</text>
				<text v-else-if="content.state == 1">待付款</text>
				<text v-else-if="content.state == 2">待成团</text>
				<text v-else-if="content.state == 5">已完成</text>
				<text v-else-if="content.state == 6">拼团失败</text>
				<text v-else-if="content.state == 7">已退款</text>
				<view v-if="content.invite == 1">
					<text v-if="content.state == 3">待发货</text>
					<text v-else-if="content.state == 4">待收货</text>
				</view>
				<view v-else>
					<text v-if="content.state == 3 || content.state == 4">待自提</text>
				</view>
			</view>
			<!-- 秒杀商品或者普通商品 -->
			<view v-if="type_state == 0 || type_state == 1">
				<text v-if="content.state == 1">待付款</text>
				<text v-else-if="content.state == 4">已完成</text>
				<text v-else-if="content.state == 5">已退款</text>
				<view v-if="content.invite == 1">
					<text v-if="content.state == 2">待发货</text>
					<text v-else-if="content.state == 3">待收货</text>
				</view>
				<view v-else>
					<text v-if="content.state == 2 || content.state == 3">待自提</text>
				</view>
			</view>
			<!-- <view class="integra skill" v-if="type_state == 0 && content.seckill == 2 && content.invite == 1">秒杀</view> -->
			<view class="integra skill" v-if="type_state == 0 && content.seckill == 2">秒杀</view>
			<view class="integra " v-else-if="type_state == 2">积分</view>
			<view class="integra group" v-else-if="type_state == 3">拼团</view>
			<!-- <view class="integra group" v-else-if="type_state == 3 && content.invite == 1">拼团</view> -->
			<!-- <view class="integra tostore" v-else-if="content.invite == 2">到店自取</view> -->
		</view>
		<!-- 地址信息 -->
		<view class="orderarea" v-if="content.type != 2">
			<!-- 物流 -->
			<view class="orderarea_info" v-if="content.invite != 2">
				<view class="top">
					<image :src="Url+'add_images/sc-address.png'" mode="widthFix"></image>
					{{content.name}}
					<text> {{content.mobile}}</text>
				</view>
				<view class="adress">{{content.address}}</view>
			</view>
			<!-- 到店自提 -->
			<view class="orderarea_info" v-else>
				<view class="top">
					<image :src="Url+'add_images/sc-dianjia.png'" mode="widthFix"></image>
					{{content.seller. province+content.seller.city+content.seller.area+content.seller. address}}
				</view>
				<view class="middle">
					<view class="middle_left"> 商家电话：{{content.seller.mobile}}</view>
					<view class="middle_right"> 取货时间：{{content.seller.start_time}} - {{content.seller.end_time}}</view>
				</view>
				<view class="bottom">
					预留电话：<text>{{content.seller.mobile}}</text>
				</view>
			</view>
		</view>
		<!-- 剩余支付时间 -->
		<view class="ordercard" v-if="content.state == 1 ">
			<view class="">
				<view class="ordercard_tips">
					<text>等待买家付款，剩余</text>
					<uni-countdowns :show-day="false" :hour="0" :minute="0" :second="content.countdown" background-color="" endSe=""
					 color="#F73E2F" splitorColor="#F73E2F"></uni-countdowns>
					<text>订单会自动关闭！！！</text>
				</view>
				<view class="orderbtn">
					<view class="orderbtn_i orderbtn_left" @tap="cancelOrder(content.id)">取消订单</view>
					<view class="orderbtn_i orderbtn_right" @tap="topay(content.id)">去支付</view>
				</view>
			</view>
		</view>
		<!-- 拼团 -->
		<view class="group_success" v-if="type_state == 3 && (content.state == 3 || content.state == 4 || content.state == 5)">
			<view class="group_state">
				{{content.user_num}}人拼团成功
			</view>
			<view class="group_header">
				<view v-for="(item,index) in content.user" :key="index">
					<image :src="item.avatar" mode="" v-if="item.avatar != ''"></image>
					<image :src="Url+'mine/discount/header02.png'" mode="" v-else></image>
				</view>
			</view>
		</view>
		<!-- 拼团中 -->
		<view class="nowgroup" v-if="type_state == 3 && content.state == 2">
			<view class="title">
				<text class="group_time_title">剩余拼团时间</text>
				<uni-countdowns :show-day="false" :hour="0" :minute="0" :second="content.assemble_time" background-color="" endSe=""
				 color="#F73E2F" splitorColor="#F73E2F" fontWeight="500"></uni-countdowns>
			</view>
			<view class="pic">
				<scroll-view :scroll-x="true" @scroll="scroll" class="scroll_pic">
					<view class="header_pic" v-for="(item,index) in content.user" :key="index">
						<image :src="item.avatar" mode="" v-if=" item.avatar != ''"></image>
						<image :src="Url+'mine/discount/header01.png'" mode="" v-if="item.picShow && item.avatar == ''"></image>
						<image :src="Url+'add_images/group_no.png'" mode="" v-if="!item.picShow"></image>
						<view class="team" v-if="index == 0">
							团长
						</view>
					</view>
				</scroll-view>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<button class="orderbtn_i orderbtn_right share" open-type="share">邀请好友</button>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="orderbtn_i orderbtn_right" @tap="h5Share">邀请好友</view>
			<!-- #endif -->
			<!-- #ifdef APP-PLUS -->
			<view class="orderbtn_i orderbtn_right" @tap="appShare">邀请好友</view>
			<!-- #endif -->
		</view>
		<!-- 商品信息 -->
		<view class="product">
			<view class="product_title">
				<!-- <view class="integra skill" v-if="type_state == 0 && content.seckill == 2 && content.invite == 2">秒杀</view> -->
				<!-- <view class="integra group" v-else-if="type_state == 3 && content.invite == 2">拼团</view> -->
				商品信息
			</view>
			<view class="productinfo">
				<!-- 非积分商品商品信息 -->
				<view class="productinfo_l" v-for="(item,index) in content.goods" :key="index" v-if="type_state != 2" @tap="toProductDetail(item.detail_id)">
					<image :src="item.img" mode=""></image>
					<view class="productinfo_info">
						<view class="productinfo_info_top">
							<view class="title">{{item.name }}</view>
							<view class="standard">{{item.specs }}</view>
						</view>
						<view class="productinfo_info_bottom">
							<view class="price">
								<view class="price_now"><text>￥</text>{{item.price}}</view>
								<view class="price_line" v-if="item.cost_price">￥{{item.cost_price}}</view>
							</view>
							<view class="num">×<text>{{item.num}}</text></view>
						</view>
					</view>
				</view>
				<!-- 积分商品商品信息 -->
				<view class="productinfo_l" v-if="type_state == 2" @tap="toProductDetail(content.goods_id)">
					<image :src="content.img" mode=""></image>
					<view class="productinfo_info">
						<view class="productinfo_info_top productinfo_info_top_integial">
							<view class="title">{{content.goods_name}}</view>
							<view class="integra">
								<view>
									{{content.price}}<text>积分</text>
								</view>
								<view class="num">×<text>{{content.num}}</text></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="" v-if="type_state == 0 || type_state == 1">
				<view class="freight" v-if="content.type != 2 && type_state != 2">
					<text>商品总价</text>
					<text>￥{{content.goods_price}}</text>
				</view>
				<view class="freight" v-if="content.type != 2 && type_state != 2">
					<text>优惠券</text>
					<text class="price_jian">-￥{{content.discount}}</text>
				</view>
				<view class="freight" v-if="content.type != 2 && type_state != 2 && content.invite != 2">
					<text>运费</text>
					<text v-if="content.postage > 0">￥{{content.postage}}</text>
					<text v-else>免运费</text>
				</view>
			</view>
			<view class="" v-if="type_state == 3">
				<view class="freight" v-if="content.type != 2 && type_state != 2">
					<text>商品总价</text>
					<text>￥{{content.goods_price}}</text>
				</view>
				<view class="freight" v-if="content.type != 2 && type_state != 2">
					<text>运费</text>
					<text v-if="content.postage > 0">{{content.postage}}</text>
					<text v-else>免运费</text>
				</view>
			</view>
			<view class="order_price" v-if="type_state != 2">
				<view class="num">共{{content.goods_num}}件</view>
				<view class="all">合计:</view>
				<view class="price"><text class="price_flag">￥</text><text class="sum_price">{{content.total_price}}</text></view>
			</view>
			<view class="order_price" v-else>
				<view class="num">共{{content.num}}件</view>
				<view class="all">合计:</view>
				<view class="price price_integral">
					{{content.price}}
					<text>积分</text>
				</view>
			</view>
			<view class="refund" v-if="((type_state == 0 || type_state == 1) && content.state == 5) || (type_state == 3  && (content.state == 6 || content.state == 7))">
				退款成功 <text> 您支付的 ￥{{content.pay_price}} 元已经原路退回</text>
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="orderinfo product">
			<view class="product_title">订单信息</view>
			<view class="orderinfo_info">订单编号：{{content.order_no}}</view>
			<view v-if="type_state == 2">
				<view class="orderinfo_info" v-if="content.state != 1">支付方式：积分支付</view>
			</view>
			<view v-else-if="type_state != 2">
				<view class="orderinfo_info" v-if="content.state != 1">支付方式：
					<text v-if="content.pay_type == 1">微信</text>
					<text v-else-if="content.pay_type == 2">余额</text>
					<text v-else-if="content.pay_type == 3">后台</text>
					支付
				</view>
			</view>
			<view class="orderinfo_info">下单时间：{{content.create_time}}</view>
			<view class="orderinfo_info" v-if="content.pay_time">付款时间：{{content.pay_time}}</view>
			<view v-else-if="type_state == 3">
				<view class="orderinfo_info" v-if="content.real_time">拼团时间：{{content.real_time}}</view>
			</view>
			<view class="orderinfo_info" v-if="content.deliver_time">发货时间：{{content.deliver_time}}</view>
			<view class="orderinfo_info" v-if="content.collect_time">收货时间：{{content.collect_time}}</view>
			<view class="orderinfo_info" >订单备注：<text v-if="content.memo">{{content.memo}}</text><text v-else>无</text></view>
		</view>
		<!-- 物流信息 -->
		<view>
			<view class="orderinfo product" v-if="content.logistic_no">
				<view class="product_title">物流信息</view>
				<view class="orderinfo_info">物流公司：{{content.logistic}}</view>
				<view class="orderinfo_info orderinfo_info_copy">物流单号：{{content.logistic_no}}<text class="copy" @tap="tocopy">复制</text></view>
			</view>
		</view>
		<shop-loading v-if="shopLoad"></shop-loading>
		<share-model v-model="shareshow"></share-model>
		<sc-home></sc-home>
	</view>
</template>

<script>
	// #ifdef H5
	import wxsdk from '@/static/js/wechat.js';
	// #endif
	import shareModel from '@/components/shareModel/shareModel.vue';
	import uniCountdowns from '@/components/uni-countdown/uni-countdown2.vue'
	import {
		integralOrderDetail,
		groupOrderDetail,
		skillNormalorderDetail,
		cancel,
		assemblecancel,
		integralcancel
	} from '@/common/order.js';
	import h5Copy from '@/store/junyi-h5-copy.js'
	import {
		assembleShare
	} from '@/common/index.js';
	export default {
		components: {
			shareModel,
			uniCountdowns
		},
		data() {
			return {
				Url: this.Imgurl,
				orderid: '',
				type_state: '', //type_state：0（秒杀商品），1（普通商品），2（积分商品），3（拼团商品）
				content: {},
				shopLoad: true,
				shareshow: false,
				productId: ''
			};
		},
		onShareAppMessage(res) {
			const {
				content
			} = this;
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '您的好友' + content.nick_name + '邀请您一起参加拼团活动,' + content.goods[0].name,
				path: '/pageB/groupTuxedo/tuxedoIm?id=' + content.user_assemble_id,
				imageUrl: content.cover
			}
		},
		onLoad(options) {
			console.log(options)
			this.orderid = options.id
			this.type_state = options.type_state
			console.log(this.orderid)
			console.log(this.type_state)
			this.getOrderDetail()
		},
		methods: {
			//h5分享
			h5Share() {
				let that = this;
				// console.log(wxsdk.share)
				this.shareshow = true;
				const {
					content,
					orderid,
					type_state
				} = this;
				let goods = content.goods[0];
				assembleShare({
					id: content.user_assemble_id
				}).then(res => {
					if (res.code == 1) {
						wxsdk.share({
								title: '您的好友' + content.nick_name + '邀请您一起参加拼团活动',
								path: res.msg,
								imageUrl: content.cover,
								desc: goods.name,
								url: 'https://shop.jyecloud.cn/h5/pageD/order/orderdetail?id=' + orderid + '&type_state=' + type_state
							},
							res => {
								// console.log(res)
								that.shareshow = false;
								that.toast('分享成功');
							}
						);
					}
				}).catch()
			},
			//app分享
			appShare() {
				const {
					content
				} = this;
				let goods = content.goods[0];
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: '/pageB/groupTuxedo/tuxedoIm?id=' + content.user_assemble_id,
					title: '您的好友' + content.nick_name + '邀请您一起参加拼团活动,' + goods.name,
					summary: goods.brief,
					imageUrl: content.cover,
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			scroll() {},
			toafterSales() {
				var content = JSON.stringify(this.content)
				uni.navigateTo({
					url: '/pageD/afterSales/appllyAfterSales?content=' + content
				})
			},
			//取消订单
			cancelOrder(id) {
				uni.showModal({
					title: '提示',
					content: '您确定要取消该订单吗？',
					showCancel: true,
					success: res => {
						let params = {
							id: id
						}
						if (res.confirm) {
							uni.showLoading({
								title: '正在取消订单中'
							})
							if (this.type_state == 3) {
								assemblecancel(params).then(res => {
									this.tohandleCancelOrder(res)
								}).catch()
							} else if (this.type_state == 0 || this.type_state == 1) {
								cancel(params).then(res => {
									this.tohandleCancelOrder(res)
								}).catch()
							} else if (this.type_state == 2) {
								integralcancel(params).then(res => {
									this.tohandleCancelOrder(res)
								}).catch()
							}
						}
					}
				});
			},
			//处理取消订单接口返回数据
			tohandleCancelOrder(res) {
				console.log(res)
				if (res.code == 1) {
					this.toast(res.msg)
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
						uni.hideLoading()
					}, 2000)
				} else {
					this.toast(res.msg)
				}

			},
			//去支付
			topay(id) {
				console.log(this.type_state)
				let data = {
					order_id: id,
					type: this.type_state
				}
				let da = JSON.stringify(data)
				uni.navigateTo({
					url: '/pageB/cashierDesk/cashierDesk?data=' + da
				})
			},
			//获取订单详情
			getOrderDetail() {
				this.shopLoad = true;
				let params = {
					id: this.orderid
				}
				switch (this.type_state) {
					case '0': //秒杀商品
					case '1': //普通商品
						skillNormalorderDetail(params).then(res => {
							this.tohandleOrderDetail(res)
						}).catch()
						break
					case '2': //积分商品
						integralOrderDetail(params).then(res => {
							this.tohandleOrderDetail(res)
						}).catch()
						break
					case '3': //拼团商品
						groupOrderDetail(params).then(res => {

							console.log(res)
							if (res.code == 1) {
								// this.productId = assemble_id
								this.content = res.msg
								let user = JSON.parse(JSON.stringify(res.msg.user));
								user.map(item => {
									if (typeof item.id == 'number') {
										item.picShow = true;
									} else {
										item.picShow = false;
									}
								})
								this.content.user = user;
								console.log("判断后", this.content)
								this.shopLoad = false;
							} else {
								this.shopLoad = false;
								this.toast(res.msg)
								uni.reLaunch({
									url: '/pageD/order/group_order'
								});
							}
						}).catch()
						break
					default:
						break
				}

			},
			//处理获取订单详情接口放回数据
			tohandleOrderDetail(res) {
				console.log(res)
				const {
					type_state
				} = this;
				if (res.code == 1) {
					this.content = res.msg
					this.shopLoad = false;
				} else {
					this.shopLoad = false;
					this.toast(res.msg)
					if (type_state == 0 || type_state == 1) {
						uni.reLaunch({
							url: "/pageD/order/order"
						})
					} else if (type_state == 2) {
						uni.reLaunch({
							url: '/pageA/integral/changehistory'
						})
					} else {
						uni.reLaunch({
							url: '/pageD/order/group_order'
						});
					}

				}
			},
			toProductDetail(key) {
				uni.redirectTo({
					url: '/pageB/classify/productdetail?type=' + this.type_state + '&id=' + key
				})
				// uni.navigateTo({
				// })
			},
			tocopy() {
				if (uni.getSystemInfoSync().version) {
					//小程序复制
					this.chenxuCopy()
				} else {
					this.h5Copy();
				}
			},
			h5Copy() {
				console.log("走到h5")
				let content = this.content.logistic_no // 复制内容，必须字符串，数字需要转换为字符串
				const result = h5Copy(content)
				console.log(result)
				if (!result) {
					uni.showToast({
						title: '不支持',
					})
				} else {
					this.toast('复制成功');
				}
			},
			chenxuCopy() {
				uni.setClipboardData({
					data: this.content.logistic_no,
					success: function() {
						console.log('success');
					}
				});
				uni.getClipboardData({
					success: function(res) {
						console.log(res.data);
						this.toast("复制成功")
					}

				});
			},
		}
	};
</script>

<style lang="less" scoped>
	.state {
		position: relative;
		width: 100%;
		height: 165upx;
		background: linear-gradient(to right, #FE3C53 30%, #FE6C7D 100%);
		padding: 0 15upx;
		padding-top: 30upx;
		box-sizing: border-box;

		text {

			font-size: 32upx;
			color: #ffffff;
		}

		.integra {
			position: absolute;
			right: 0;
			top: 40upx;
			width: 100upx;
			height: 45upx;
			background: #FFC150;
			border-top-left-radius: 20upx;
			border-bottom-left-radius: 20upx;
			font-size: 24upx;
			color: #ffffff;
			text-align: center;
			line-height: 45upx;
		}

		.skill {
			background: #FD8C65;
		}

		.group {
			background: #6895F9;
		}

		.tostore {
			width: 120upx;
			height: 45upx;
			background: #62BF6F;
		}
	}

	.ordercard {
		width: calc(100% - 30upx);
		margin: auto;
		background-color: #ffffff;
		border-radius: 10upx;
		margin-bottom: 20upx;
		padding-left: 25upx;
		overflow: hidden;
		position: relative;

		.ordercard_tips {
			font-size: 28upx;
			color: #333333;
			margin-top: 30upx;
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.uni-countdown {
				transform: scale(0.9);
			}
		}

		.orderbtn {
			margin: 15upx 0 30upx;
			display: flex;

			.orderbtn_i {
				width: 156upx;
				height: 46upx;
				text-align: center;
				line-height: 46upx;
				border-radius: 8upx;
				font-size: 24upx;
			}

			.orderbtn_left {
				border: 2upx solid #e1e1e1;
				box-sizing: border-box;
				color: #666666;
				margin-right: 10upx;
			}

			.orderbtn_right {
				background-color: #FF2842;
				color: #ffffff;
			}
		}
	}

	.group_success {
		width: calc(100% - 30upx);
		margin: 20upx auto;
		height: 100upx;
		background-color: #FFFFFF;
		border-radius: 10upx;
		padding: 0 15upx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.group_state {
			font-size: 28upx;
			color: #333;
		}

		.group_header {
			display: flex;
			align-items: center;

			image {
				width: 66upx;
				height: 66upx;
				border-radius: 50%;
				margin-left: 10upx;
				position: relative;

				&:nth-child(n+1) {
					margin-left: -30upx;
				}
			}
		}
	}

	// 拼团中
	.nowgroup {
		width: calc(100% - 30upx);
		border-radius: 10upx;
		background-color: #ffffff;
		margin: 20upx auto;
		padding: 25upx;
		padding-top: 30upx;
		padding-bottom: 50upx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;

		.group_time_title {
			margin-right: 4upx;
		}

		.title {
			font-size: 28upx;
			color: #333;
			display: flex;
			align-items: center;

			.uni-countdown {
				// transform: scale(0.9);
				// font-weight: 700;
			}
		}

		.pic {
			display: flex;
			margin-top: 30upx;

			.scroll_pic {
				height: 120upx;
				white-space: nowrap;
				width: 750rpx;
				    padding: 0 30rpx;
			}

			.header_pic {
				width: 106upx;
				height: 106upx;
				margin-right: 20upx;
				border-radius: 50%;
				box-sizing: border-box;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				white-space: nowrap;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.header_pic:first-child {
				border: none;
				background-color: #f73e2f;
				position: relative;

				.team {
					width: 82upx;
					height: 36upx;
					border-radius: 8upx;
					font-size: 24upx;
					color: #FFFFFF;
					text-align: center;
					line-height: 36upx;
					background: linear-gradient(to right, #f83008 0, #fa7968 100%);
					position: absolute;
					left: 50%;
					bottom: -10upx;
					transform: translate(-50%);
				}
			}
		}

		.orderbtn_i {
			margin-top: 30upx;
			width: 156upx;
			height: 46upx;
			text-align: center;
			line-height: 46upx;
			border-radius: 8upx;
			font-size: 24upx;
		}

		.orderbtn_right {
			background-color: #FF2842;
			color: #ffffff;
		}
	}

	.orderarea {
		width: calc(100% - 30upx);
		margin: 20upx auto;
		position: relative;
		padding: 20upx 15upx;
		margin-top: -50upx;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		border-radius: 10upx;

		image {
			width: 38upx;
			height: 38upx;
			margin-right: 15upx;

		}

		.orderarea_info {
			padding: 10upx 6upx 20upx;

			.top {
				font-size: 28upx;
				color: #666;
				line-height: 50upx;
				display: flex;
				align-items: center;

				text {
					margin-left: 10upx;
					font-size: 26upx;
				}

			}

			.middle {
				display: flex;
				margin: 15upx 0;
				font-size: 28upx;
				color: #999;

				.middle_left,
				.middle_right {
					flex: 1;
				}

				.middle_left {
					border-right: 2upx solid #d3d3d3;
				}

				.middle_right {
					text-align: center;
				}
			}

			.bottom {
				font-size: 28upx;
				color: #999;
			}

			.adress {
				margin-top: 20upx;
				font-size: 28upx;
				line-height: 28upx;
				color: #333333;
			}
		}
	}

	.product {
		width: calc(100% - 30upx);
		margin: 20upx auto;
		padding: 0 25upx 15upx;
		box-sizing: border-box;
		background-color: #ffffff;
		border-radius: 10upx;

		.product_title {
			height: 90upx;
			font-size: 32upx;
			color: #333333;
			font-weight: bold;
			border-bottom: 2upx solid #f8f8f8;
			display: flex;
			align-items: center;

			.integra {
				width: 100upx;
				height: 40upx;
				background: #FFC150;
				border-radius: 8upx;
				margin-top: 2upx;
				font-size: 24upx;
				color: #ffffff;
				text-align: center;
				line-height: 40upx;
				margin-right: 12upx;
			}

			.skill {
				background: #FD8C65;
			}

			.group {
				background: linear-gradient(to right, #5386F7 30%, #6AADF8 100%);
			}

		}

		.productinfo {
			width: 100%;
			display: flex;
			flex-direction: column;
			margin: 25upx 0;

			.productinfo_l {
				display: flex;
				width: 100%;
				margin-top: 20upx;

				&:last-child .productinfo_info {
					border: none;
				}

				image {
					width: 140upx;
					height: 140upx;
					border-radius: 10upx;
				}

				.productinfo_info {
					margin-left: 30upx;
					// width: 100%;
					border-bottom: 2upx solid #f8f8f8;

					.standard {
						font-size: 24upx;
						color: #999;
						margin-top: 10upx;
					}

					.productinfo_info_top_integial {
						justify-content: space-around;
					}

					.productinfo_info_top {
						height: 140upx;
						width: 100%;
						display: flex;
						flex-direction: column;

						.title {
							width: 500upx;
							font-size: 28upx;
							color: #333333;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
						}

						.integra {
							display: flex;
							justify-content: space-between;
							align-items: flex-end;
							color: #333;
							font-size: 32upx;

							text {
								margin-left: 5upx;
								font-size: 26upx;
								color: #333;
							}

							.num {
								color: #565656;
								font-size: 26upx;

								text {
									font-size: 28upx;
								}
							}
						}
					}

					.productinfo_info_bottom {
						display: flex;
						justify-content: space-between;
						align-items: flex-end;
						margin-bottom: 20upx;

						.price {
							display: flex;
							color: #FF2842;
							font-size: 30upx;
							align-items: flex-end;
							font-weight: 700;

							text {
								font-size: 20upx;
							}

							.price_line {
								font-size: 20upx;
								margin-left: 8upx;
								font-weight: 400;
								color: #999;
								text-decoration: line-through;
								padding-bottom: 2upx;
							}
						}

						.num {
							color: #565656;
							font-size: 26upx;

							text {
								font-size: 28upx;
							}
						}
					}
				}
			}

			.productinfo_right {
				display: flex;
				flex-direction: column;
				align-items: center;

				.productinfo_r {
					display: flex;
					align-items: center;

					.price {
						font-size: 24upx;
						color: #333333;
						margin-left: 25upx;

						text {
							font-size: 28upx;
						}
					}

					.num {
						font-size: 24upx;
						color: #999999;
						text-align: right;
					}
				}

				.productinfo_bottom {
					margin-top: 30upx;
					padding: 8upx 20upx;
					font-size: 22upx;
					border-radius: 26upx;
					border: 1upx solid #d6d6d6;
				}
			}
		}

		.freight {
			display: flex;
			justify-content: space-between;
			font-size: 26upx;
			color: #999999;
			margin-bottom: 20upx;

			.price_jian {
				color: #FF2842;
			}
		}

		.refund {
			height: 68upx;
			background-color: #F8F8F8;
			font-size: 26upx;
			color: #000033;
			padding-left: 70upx;
			box-sizing: border-box;
			border-radius: 10upx;
			margin: 15upx auto;
			font-weight: 700;

			text {
				font-weight: 400;
				padding-left: 15upx;
				font-size: 26upx;
				color: #333333;
				line-height: 68upx;
			}
		}
	}

	.order_price {
		margin-top: 40upx;
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;

		.num {
			font-size: 24upx;
			color: #999999;
		}

		.all {
			font-size: 28upx;
			color: #333333;
			margin: 0 10upx;
		}

		.price {
			font-size: 32upx;
			color: #FF2842;
			font-weight: 700;
			

			.price_flag {
				color: #FF2842;
				font-size: 20upx;
			}

			text {
				margin-left: 2upx;
				font-size: 28upx;
				color: #999999;
			}

			.sum_price {
				font-size: 30upx;
				font-weight: 700;
				color: #FF2842;
			}
		}
		.price_integral{
			color: #FF2842;
			text{
				margin-left: 6upx;
				color: #FF2842;
				font-weight: 400;
			}
		}
		.freight {
			font-size: 24upx;
			color: #666;
		}
	}

	.orderinfo {
		margin-bottom: 40upx;

		.product_title {
			margin-bottom: 20upx;
		}

		margin-top: 20upx;

		.orderinfo_info {
			font-size: 26upx;
			color: #999999;
			line-height: 60upx;

			.copy {
				display: inline-block;
				padding: 4upx 10upx;
				margin-left: 20upx;
				font-size: 20upx;
				color: #c7c7c7;
				line-height: 20upx;
				border-radius: 10upx;
				border: 1upx solid #c7c7c7;
			}
		}

		.orderinfo_info_copy {
			display: flex;
			align-items: center;
		}
	}
</style>
<style>
	page {
		background-color: #f8f8f8;
	}
</style>
